<template>
  <div>
 <el-container>
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">操作日志</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
      <div class="inside-main-box" style="background:#fff">
        <el-row class="inside-main" style="height: 36px">
          <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="操作时间" size="small">
                <el-date-picker clearable v-model="form.startDateTime" style="width: 100%" type="datetime"  placeholder="请选择时间"/>
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4">
              <el-form-item label="" size="small">
                <el-date-picker clearable v-model="form.endDateTime" style="width: 100%" type="datetime"  placeholder="请选择时间"/>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="操作人" size="small">
                <el-select clearable v-model="form.oper_name" style="width:300px" placeholder="请选择" filterable>
                  <el-option v-for="item in getInfo.getInfoData" :key="item.id" :label="item.usernumber" :value="item.usernumber"/>
                </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="业务类型" size="small">
                <el-select clearable v-model="form.business_type" style="width:300px" placeholder="请选择">
                  <el-option v-for="item in businessType" :key="item.value" :label="item.label" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="所属工厂名称" size="small">
                <el-select clearable v-model="form.factory_name" style="width:300px" placeholder="请选择">
                  <el-option v-for="item in getInfo.factoryInfo" :key="item.factory_name" :label="item.factory_name" :value="item.factory_name"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row style="height: 36px">
              <el-col :span="8" style="margin-left: 20px">
                <el-button size="small" class="sele-but" icon="search" @click="selectAll">查询</el-button>
                <el-button size="small" icon="refresh" class="empty-but" @click="onReset">重置</el-button>
            </el-col>
          </el-row>
        </div>
         <div style="height: 10px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
        </div>
        <div>
          <el-table  ref="multipleTableRef" :data="tableData" style="width: 100%;" height="460" >
            <el-table-column align="center" label="序号" type="index" />
            <el-table-column align="center" prop="title" label="标题" show-overflow-tooltip/>
            <el-table-column align="center" prop="business_type" label="业务类型"  show-overflow-tooltip>
                <template #default="scope">
                    <span v-if="scope.row.business_type == 'INSERT'">新增</span>
                    <span v-else-if="scope.row.business_type == 'UPDATE'">修改</span>
                    <span v-else-if="scope.row.business_type == 'DELETE'">删除</span>
                    <span v-else-if="scope.row.business_type == 'EXPORT'">导出</span>
                    <span v-else-if="scope.row.business_type == 'IMPORT'">导入</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="oper_time" label="操作时间"  show-overflow-tooltip
             :formatter="function(row,column){  if(row.oper_time){    return $moment(row.oper_time).format('YYYY-MM-DD HH:mm:ss')  }else{    return ''  }}"/>
            <el-table-column align="center" prop="factory_name" label="所属工厂名称"   show-overflow-tooltip/>
            <el-table-column align="center" prop="oper_name" label="操作账号"  show-overflow-tooltip/>
            <el-table-column align="center" prop="description" label="操作内容"   show-overflow-tooltip/>
            <!--<el-table-column align="center" prop="code" label="操作结果"   show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.code == 0" style="color:red">失败</span>
                <span v-else-if="scope.row.code == 1" style="color:#45b035">成功</span>
              </template>
            </el-table-column>
            -->
            <el-table-column align="center" prop="oper_ip" label="请求地址"   show-overflow-tooltip/>
            <el-table-column align="center" fixed="right" label="操作" width="80px" >
               <template #default="scope">
                <el-button link type="primary" size="small" icon="view" @click="detail(scope.row)">详情</el-button>
                <!--<el-button link type="primary" size="small" icon="edit" @click="update(scope.row)">修改</el-button>
                <el-button link type="danger" size="small" icon="delete" @click="deleteRow(scope.row.cl_id)">删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-right:40px; display: flex; justify-content: flex-end"  v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
                         size="small" layout="prev, pager, next, jumper,total"
                         :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-main>
 </el-container>
   <el-dialog v-model="dialogVisible"  title="详情" width="60%" >
     <el-form :model="formData" label-width="120px">
       <el-row>
         <el-col :span="8">
           <el-form-item label="标题">
             <el-input v-model="formData.title" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="业务类型">
             <el-input v-model="formData.business_type" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="操作时间">
             <el-input v-model="formData.oper_time" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="所属工厂名称">
             <el-input v-model="formData.factory_name" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="操作人">
             <el-input v-model="formData.oper_name" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="操作结果">
             <el-input v-model="formData.code" :value="form.filingStatus == '0' ? '失败' : '成功'"/>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="请求url">
             <el-input v-model="formData.oper_url" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="请求地址">
             <el-input v-model="formData.oper_ip" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="方法名称">
             <el-input v-model="formData.method" />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="操作内容">
             <el-input v-model="formData.description" type="textarea" autosize/>
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="返回结果">
             <el-input v-model="formData.result_json" type="textarea" autosize/>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
   </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
// 文件导入
import { ElMessage, ElMessageBox } from "element-plus";
import * as XLSX from 'xlsx'
import moment from "moment";
import { selectSyslog, userInfoByUsername,selectFactoryInfo } from "@/api/BasicAccessAudit";
const router = useRouter()
onMounted(()=>{
  selectAll()
})
let businessType = [
  { value: 'INSERT', label: '新增' },
  { value: 'UPDATE', label: '修改' },
  { value: 'DELETE', label: '删除' },
  { value: 'EXPORT', label: '导出' },
  { value: 'IMPORT', label: '导入' },
]
const tableData = ref([]);
const form = reactive({})
const formData = reactive({})
const dialogVisible = ref(false)
//分页
const queryInfo = reactive({
  pagenum:1,
  pagesize:10,
  total:0
})
const handleSizeChange = (val) => {
  queryInfo.pagesize = val
  selectAll()
}
//点击第几页
const handleCurrentChange = (val) => {
  queryInfo.pagenum = val
  selectAll()
}
// 查询账号列表
let getInfo = reactive([
  {getInfoData: []},
  {businessTypeData:[]},
  {factoryInfo:[]}
])
const selectInfo=()=> {
  userInfoByUsername({}).then((res)=>{
    getInfo.getInfoData = res.data.list
  })
  selectFactoryInfo({}).then((res) => {
    getInfo.factoryInfo = res.data.list
  })
}
const selectAll = () => {
  form.pageSize = queryInfo.pagesize
  form.pageNum = queryInfo.pagenum
  if(form.startDateTime ){
    form.startDateTime = moment(form.startDateTime).format('YYYY-MM-DD HH:mm:ss')
  }else{
    form.startDateTime = ""
  }
  if(form.endDateTime ){
    form.endDateTime = moment(form.endDateTime).format('YYYY-MM-DD HH:mm:ss')
  }else{
    form.endDateTime = ""
  }
  selectSyslog(form).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.list;
      queryInfo.total = res.data.total;
      selectInfo()
    } else {
    }
  })
}
// 重置
const onReset = () => {
  form.startDateTime = "";
  form.endDateTime = "";
  form.oper_name = "";
  form.business_type = "";
  form.factory_name = "";
  queryInfo.pagenum ='1';
  queryInfo.pagesize='10';
  selectAll()
};

const detail = (row) => {
  dialogVisible.value = true
  formData.title = row.title
  if(row.business_type == 'INSERT'){
    formData.business_type = '新增'
  }else if(row.business_type == 'UPDATE'){
    formData.business_type = '修改'
  }else if(row.business_type == 'DELETE'){
    formData.business_type = '删除'
  }else if(row.business_type == 'EXPORT'){
    formData.business_type = '导出'
  }else if(row.business_type == 'IMPORT'){
    formData.business_type = '导入'
  }
  formData.oper_time = row.oper_time
  formData.factory_id = row.factory_id
  formData.factory_name = row.factory_name
  formData.oper_name = row.oper_name
  formData.description = row.description
  formData.code = row.code
  formData.oper_url = row.oper_url
  formData.oper_ip = row.oper_ip
  formData.method = row.method
  formData.result_json = row.result_json
}


</script>

<style scoped>
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
</style>
